<ui:composition template="/templates/main.xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="body">
		<link rel="stylesheet" href="css/themes/redmond/jquery.ui.all.css" />
		<script src="js/ui/jquery.ui.position.js"></script>
		<script src="js/ui/jquery.ui.core.js"></script>
		<script src="js/ui/jquery.ui.widget.js"></script>
		<script src="js/ui/jquery.ui.dialog.js"></script>
		<script src="js/ui/jquery.ui.tabs.js"></script>
		<script src="js/ui/jquery.ui.datepicker.js"></script>

		<script>
	$(function() {
		$("#UpLoadDialog").dialog({
			autoOpen: false,
			show: "blind",
			hide: "explode",
			width: 370,
			height: 400,
			modal: true
		});
	
		$("#tabs").tabs();
		$('#form\\:Path').focus(function(){
			$('#UpLoadDialog').dialog( 'open' );
		});
		$( "#datepicker1" ).datepicker({
			showOn: "button",
			buttonImage: "images/icons/calendar.gif",
			buttonImageOnly: true
		});
	});
	
	</script>
	<style>
	select{
	width:112px;
	}
	</style>
	<h:body>
		<rich:panel id="panel">
			<f:facet name="header">
				<h:outputText value="添加资料"></h:outputText>
			</f:facet>
			<h:form id="form">
				<table width="750" height="356" border="0" align="center" cellpadding="0" cellspacing="4">
					<tr>
						<td colspan="4" align="center">
							<font color="red">*</font>(为必填选项)
						</td>
					</tr>
					<tr>
						<td align="right" width="100">
							<h:outputText value=" 标 题  *"></h:outputText>			
						</td>
						<td colspan="3" align="left" width="650">
							<h:inputText id="tit" value="#{documentBean.title}" validator="#{documentBean.validateInput}" style="width: 400px;height: 18px;">
							</h:inputText>	
							<h:message for="tit" style="color:red"/>
						</td>
						
					</tr>
					<tr>
						<td align="right">
							<h:outputText value="简短标题"></h:outputText>
							
						</td>
						<td colspan="3">
							<h:inputText value="#{documentBean.simpletitle}" style="width: 400px;height: 18px;"></h:inputText>
						</td>
					</tr>
					
					<tr>
						<td align="right">
							<h:outputText value="作          者  *"></h:outputText>
							
						</td>
						<td align="left" width="100">
							<h:inputText  value="#{documentBean.author}" id="author" validator="#{documentBean.validateInput}">
		
							</h:inputText>
							
						</td>
						<td align="left" width="90">
							<h:message for="author" style="color:red"></h:message>	
						</td>
						<td align="left">	
							<h:outputLabel value=" 标   签 *"></h:outputLabel>
							<h:inputText value="#{documentBean.label}" id="label" validator="#{documentBean.validateInput}" style="width:154px">
							</h:inputText>
							<h:message for="label" style="color:red"></h:message>
						</td>
						
						
					</tr>
				    <tr>
						<td align="right">
							<h:outputText value="关键词*"></h:outputText>		
						</td>
						<td align="left" width="100">
							<h:inputText value="#{documentBean.keywords}" id="keywords" validator="#{documentBean.validateInput}" />		
						</td>
						<td align="left" width="90">
							<h:message for="keywords" style="color:red"></h:message>
						</td>
						<td>
							<h:outputText value=" 主   题 *"></h:outputText>
							<h:inputText value="#{documentBean.themewords}" id="themewords" validator="#{documentBean.validateInput}" style="width:154px"/>
							<h:message for="themewords" style="color:red"></h:message>
						</td>
						
					</tr>
					 <tr>
						<td align="right">
						   <h:outputText value="分       类*  "></h:outputText>
							
						</td>
						<td align="left" width="100">
							<h:selectOneMenu value="#{documentType.typeId}">
								<f:selectItems value="#{documentType.doccumentTypes}" />
							</h:selectOneMenu>	
							
						</td>
						<td width="400" align="left" colspan="2">
						目录类别：
						<c:choose>
							<c:when test="#{selectBean.firstSize != 0}">	
						<h:selectOneMenu value="#{selectBean.currentType}"
									valueChangeListener="#{selectBean.valueChanged}">
								<f:selectItems value="#{selectBean.firstList}" />
									<f:ajax event="valueChange" render="second" execute="@this"/>
							</h:selectOneMenu>							
							<h:selectOneMenu id="second" value="#{selectBean.currentType1}" >
							<f:selectItems value="#{selectBean.secondList}" />
							</h:selectOneMenu>
							</c:when>
							<c:otherwise>
								您还没有添加目录类别，请先<a href="addClassify.jsf">添加</a>。
							</c:otherwise>
						</c:choose>		
						</td>
					
					</tr>
					<tr>
						<td align="right">
							<h:outputText value="图书年份  "></h:outputText>							
						</td>
						<td width="100" align="left">
							<input type="text" id="bookYear"/>
							
						</td>
						<td width="90" align="left">
						</td>
						<td>
							<h:outputText value=" 类  别 *"></h:outputText>
							<h:inputText value="#{documentBean.classify}" id="classify" validator="#{documentBean.validateInput}" style="width:155px;"/>
							<h:message for="classify" style="color:red"></h:message>
						</td>
					
					</tr>
					<tr>
						<td align="right" width="100">
							<h:outputText value="参考文献"></h:outputText>
						</td>
						<td colspan="3" width="650">
							<h:inputText value="#{documentBean.referencescited}" style="width: 400px;height: 18px;" />
						</td>
					</tr>
					<tr>
						<td align="right">
							<h:outputText value="语言"></h:outputText>
						</td>
						<td width="100" align="left">
							<h:inputText value="#{documentBean.language}"></h:inputText>
							
						</td>
						<td width="90">
						</td>
						<td>
							<h:outputText value="日        期  " ></h:outputText>
							<input type="text" id="datepicker" style="width:157px"/>
						</td>
					</tr>
					
					<tr>
						<td align="right" width="100">
							<h:outputText value="图片"></h:outputText>		
						</td>
						<td colspan="3" width="650">
							<input value="选择" type="button" onclick="$('#UpLoadDialog').dialog( 'open' );" />
							 <h:inputText id="Path" value="#{documentBean.image}" style="width:358px" />
						</td>
					</tr>
					 <tr>
						<td align="right" width="100">
							<h:outputText value="内容 *"></h:outputText>
						</td>
						<td rowspan="2" colspan="3" width="650">
							<h:inputTextarea rows="15" cols="75" id="summary" validator="#{documentBean.validateInput}" value="#{documentBean.summary}" />
							<br />
							<h:message for="summary" style="color:red"></h:message>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td colspan="4">
							<hr size="1" color="#E0E0E0" />
						</td>
					</tr>
					<tr>		
						<td align="center" colspan="4">	
							<h:commandButton id="add" value="添加" onclick="$('#imageForm').submit();" action="#{documentBean.InsertDocument}" >
							</h:commandButton>
							<h:commandButton id="return" value="返回" onclick="javascript:history.back();">
							</h:commandButton>
						</td>
					</tr> 
								
				</table>
			</h:form>
		</rich:panel>
		<div id="UpLoadDialog" title="上传图片">
			<div id="tabs" style="width:300px">
				<ul>
					<li><a href="#tabs-1" style="width:60px">图片列表</a></li>
					<li><a href="#tabs-2" style="width:60px">上传图片</a></li>
				</ul>
			<div id="tabs-1">
				<a4j:commandLink value="刷新图片列表"  render="picList" action="#{imageList.updateList}" ></a4j:commandLink>

				<rich:dataTable id="picList" value="#{imageList.imgList}" var="pic" width="110">
					<rich:column width="80">
						<f:facet name="header">
							<h:outputText value="图片" /> 
						</f:facet>
						<img id="pic" onclick="$('#form\\:Path').val($(this).attr('alt'));$('#UpLoadDialog').dialog( 'close' );" src="#{pic.path}" width="80" height="80" alt="#{pic.name}" />
					</rich:column>
					<rich:column width="30">
						<f:facet name="header">
							<h:outputText value="名称" />
						</f:facet>
						 <h:outputText value="#{pic.name}" />
					</rich:column>
					
				</rich:dataTable>
				
				<br />
				
				
			</div>
			<div id="tabs-2">
				<p><iframe src="FileUpload.jsf" frameborder="0"></iframe>
				
				</p>
			</div>
			
			</div>
	   </div>
		</h:body>
  	</ui:define>
</ui:composition>
